import React, { useEffect, useState } from 'react';
import { Button, Form, Modal, Row, Switch } from 'antd';
import { useTranslation } from 'react-i18next';
import AgentService, { IOtherWork, IStreamMode } from '@/modules/Agent';
import TextArea from 'antd/lib/input/TextArea';
import styled from '@emotion/styled';

const TextLabel = styled.span`
	display: inline-block;
	width: 180px;
	line-height: 24px;
	color: #202020;
`;

const ErrorMsg = styled.p`
	color: #f8646a;
	position: absolute;
	bottom: -40px;
`;
const ReasonTextArea = styled(TextArea)`
	textarea {
		background: #f6f6f6;
		border-radius: 4px;
	}
`;

const AutoOtherWork = (props: { visible: boolean; cancel: () => void; ok: (value: IOtherWork) => void }) => {
	const { t } = useTranslation();
	const [errorMsgVisible, setErrorMsgVisible] = useState<boolean>(false);

	const handleOk = async () => {
		if (autoOtherWork.timeoutOtherWork === 'on' && (!autoOtherWork.timeoutReason || autoOtherWork.timeoutReason.trim() === '')) {
			setErrorMsgVisible(true);
			return;
		}

		configure.setOtherWork(autoOtherWork);
		await AgentService.saveOtherWork();
		setErrorMsgVisible(false);
		props.ok(autoOtherWork);
	};

	const onChange = (value: any, mode: string) => {
		switch (mode) {
			case 'auto':
				setAutoOtherWork({ ...autoOtherWork, endSessionOtherWork: value ? 'on' : 'off' });
				break;
			case 'timeout':
				setAutoOtherWork({ ...autoOtherWork, timeoutOtherWork: value ? 'on' : 'off' });
				break;
			case 'timeoutReason':
				setAutoOtherWork({ ...autoOtherWork, timeoutReason: value });
				break;
			default:
				break;
		}
	};
	const handleCanel = async () => {
		setAutoOtherWork(configure.otherWork);

		setErrorMsgVisible(false);
		props.cancel();
	};
	const checkedOtherwork = async () => {
		await AgentService.checkedOtherWork();
	};

	useEffect(() => {
		if (props.visible) {
			checkedOtherwork();
			setAutoOtherWork(configure.otherWork);
		}
	}, [props.visible]);

	const { configure } = AgentService;

	const [autoOtherWork, setAutoOtherWork] = useState<IOtherWork>(configure.otherWork);

	return (
		<Modal
			className="other-wrok-modal"
			title={t('auto-otherWork')}
			open={props.visible}
			onOk={handleOk}
			onCancel={handleCanel}
			maskClosable={false}
			okText={t('save-configure')}
			cancelText={t('cancel')}
		>
			<Form layout="horizontal">
				{/* <Form.Item>
					<TextLabel>{t('end-session-auto-other-work')}：</TextLabel>
					<Switch checked={autoOtherWork.endSessionOtherWork === 'on'} onChange={value => onChange(value, 'auto')} />
				</Form.Item> */}
				<Form.Item>
					<TextLabel>{t('timeout-auto-other-work')}：</TextLabel>
					<Switch checked={autoOtherWork.timeoutOtherWork === 'on'} onChange={value => onChange(value, 'timeout')} />
				</Form.Item>
				{autoOtherWork.timeoutOtherWork === 'on' ? (
					<Form.Item>
						<ReasonTextArea
							value={autoOtherWork.timeoutReason}
							onChange={e => onChange(e.target.value, 'timeoutReason')}
							showCount
							maxLength={50}
							placeholder={t('auto-otherWork-reason') || ''}
							autoSize={{ minRows: 3, maxRows: 5 }}
						/>
						{errorMsgVisible ? <ErrorMsg>{'请填写小休原因'}</ErrorMsg> : null}
					</Form.Item>
				) : null}
			</Form>
		</Modal>
	);
};

export default AutoOtherWork;
